<!--<template>-->
<!--  <div>-->
<!--    <el-tree-->
<!--        ref="tree"-->
<!--        :data="data"-->
<!--        show-checkbox-->
<!--        node-key="id"-->
<!--        :props="defaultProps">-->
<!--    </el-tree>-->
<!--    <el-button @click="setCheckedNodes">设置选中的节点</el-button>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted } from 'vue';-->


<!--const tree = ref(null);-->
<!--const data = [-->
<!--  {-->
<!--    id: 1,-->
<!--    label: '一级 1',-->
<!--    children: [{-->
<!--      id: 4,-->
<!--      label: '二级 1-1',-->
<!--      children: [{-->
<!--        id: 9,-->
<!--        label: '三级 1-1-1',-->
<!--      }, {-->
<!--        id: 10,-->
<!--        label: '三级 1-1-2',-->
<!--      }],-->
<!--    }],-->
<!--  },-->
<!--  // 可以添加更多数据...-->
<!--];-->
<!--const defaultProps = {-->
<!--  children: 'children',-->
<!--  label: 'label',-->
<!--};-->

<!--function setCheckedNodes() {-->
<!--  const nodesToCheck = [-->
<!--    { id: 9, label: '三级 1-1-1' },-->
<!--    { id: 10, label: '三级 1-1-2' },-->
<!--  ];-->
<!--  tree.value.setCheckedNodes(nodesToCheck);-->
<!--}-->


<!--</script>-->



<template>
  <!-- div用来显示echarts控件的DOM容器 -->
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
//声明员工地区分布区域数据
const empData=ref([
  {name:'北京',value:100},
  {name:'上海',value:120},
  {name:'天津',value:130},
  {name:'重庆',value:70},
  {name:'武汉',value:90}

]);
//定义DOM容器的引用
const chartContainer=ref(null);
//声明函数用来渲染echarts控件
function  countEmpAddress(){
  //创建echarts对象
  const  myEcharts=echarts.init(chartContainer.value);
  //声明echarts控件的配置数据
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '员工地区分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: empData.value
      }
    ]
  };

  myEcharts.setOption(option);
}

onMounted(function(){
  countEmpAddress();
});
</script>